<template>
	<hqs-popup :showHeader="false" :round="16" :height="height" v-model="showPopup" @close="handleClose">
		<view class="dialog-bottom-content" :style="{ background: background, height: 'calc('+height+' - 32rpx)' }" :class="{ bgImg: showBgImg }">
			<view class="top-wrap">
				<view class="top-close" @click="handleClose('close')">
					<view class="close-btn"></view>
				</view>
				<view class="title-wrap" :class="{ border: showTitleBorder }" v-if="showTitle">
					<slot name="title">
						<view class="operation">
							<view class="cancel" @click="handleClose('close')">{{ cancelText }}</view>
							<view class="title black-title">{{ title }}</view>
							<view class="confirmed" @click="handleConfirmed">确认</view>
						</view>
					</slot>
				</view>
			</view>
			
			<scroll-view v-if="showScroll" :style="{ height: 'calc(100% - '+ topHeight +')'}" scroll-y>
				<view class="dialog-content" :style="{ padding: padding }">
					<slot name="content"></slot>					
				</view>
			</scroll-view>
			<view class="dialog-content" :style="{ padding: padding }" v-else>
				<slot name="content"></slot>					
			</view>
		</view>
	</hqs-popup>
</template>

<script>
	export default {
		props: {
			// 是否显示标题
			showTitle: {
				type: Boolean,
				default: true
			},
			// 标题
			title: {
				type: String,
				default: ''
			},
			visible: {
				type: Boolean,
				default: false
			},
			// 取消按钮文字
			cancelText: {
				type: String,
				default: '取消'
			},
			// 确定按钮文字
			confirmedText: {
				type: String,
				default: '确认'
			},
			// 背景颜色
			background: {
				type: String,
				default: '#fff'
			},
			// 是否显示标题底部边框
			showTitleBorder: {
				type: Boolean,
				default: true
			},
			// 高度
			height: {
				type: String,
				default: '50vh'
			},
			// 背景渐变图
			showBgImg: {
				type: Boolean,
				default: false
			},
			showScroll: {
				type: Boolean,
				default: true
			},
			padding: {
				type: String,
				default: 'padding: 32rpx 32rpx 0 32rpx'
			}
		},
		watch: {
			visible(val){
				if(val){
					this.showPopup = true
					this.getHeight()
				}else{
					this.showPopup = false
				}
			}
		},
		mounted() {
			if(this.visible) this.showPopup = true
		},
		data(){
			return {
				currentSelectedIds: [],
				topHeight: 0,
				showPopup: false
			}
		},
		methods: {
			// 获取高度
			getHeight() {
				setTimeout(() => {
					uni.createSelectorQuery().in(this).select('.top-wrap').boundingClientRect(data => {
						this.topHeight = data.height + uni.upx2px(20) + 'px'
						console.log(data)
					}).exec()
				}, 300)
			},

			// 关闭
			handleClose(type){
				this.showPopup = false
				this.$emit('close')
			},
			
			// 确认
			handleConfirmed(){
				this.handleClose()
				this.$emit('confirmed')
			}
		}
	}
</script>

<style lang="less">
	.dialog-bottom-content{
		max-height: 80vh;
		padding: 16rpx 0;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		
		&.bgImg{
			background: #fff url('https://zhengqi-1301372220.cos.ap-beijing.myqcloud.com/upload/org_9/org_personal/20240624/667919170d20295092.png') top no-repeat !important;
			background-size: 100% 322rpx !important;
		}
		
		.top-close{
			padding-bottom: 22rpx;
			display: flex;
			justify-content: center;
			.close-btn{
				width: 96rpx;
				height: 10rpx;
				background: #CDCFD0;
				border-radius: 10rpx;
			}
		}
		
		.title-wrap{
			font-size: 30rpx;
			padding: 0 24rpx 0rpx 24rpx;
			margin-bottom: 24rpx;
			
			&.border{
				border-bottom: 2rpx solid rgba(0,0,0,0.08);
			}
		}
		.operation{
			display: flex;
			justify-content: space-between;
			
			.cancel{
				color: #999;
			}
			
			.title{
				font-weight: bold;
			}
			
			.confirmed{
				color: #396AFC;
			}
		}
		
		
		.dialog-content{
			height: 100%;
		}
	}
	
	/deep/ .popup-bottom {
		uni-transition:last-child{
			&>view{
				background: #fff !important;
			}			
		}
	}
	
	.uni-popup{
		z-index: 998;
	}
</style>